<script setup>
import { ref, onMounted } from 'vue'
import { Search, Edit, Delete, Plus } from '@element-plus/icons-vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import {getTeacherList,deleteTeacher,updateTeacher,addTeacher} from '../../../api/teacher'

// 查询条件
const queryParams = ref({
  name: '',
  teacherNo: '',
  department: '',
  current: 1,
  pageSize: 10
})

// 表格数据
const tableData = ref([])
const total = ref(0)

// 表单数据
const dialogVisible = ref(false)
const formData = ref({
  id: '',
  name: '',
  teacherNo: '',
  gender: '',
  department: '',
  email: '',
  phone: '',
  title: '',
  office: ''
})

// 添加新的响应式数据
const isAdd = ref(false)

// 重置表单数据
const resetFormData = () => {
  formData.value = {
    id: '',
    name: '',
    teacherNo: '',
    gender: '',
    department: '',
    email: '',
    phone: '',
    title: '',
    office: ''
  }
}

// 获取教师列表
const getTeacherList0 = () => {
    getTeacherList(queryParams.value).then((res) => {
      tableData.value = res.records
      total.value = res.total
    }).catch((err) => {
      ElMessage.error(err)
    })
}

// 删除教师
const handleDelete = (row) => {
  ElMessageBox.confirm('确认删除该教师信息吗？', '提示', {
    type: 'warning'
  }).then(async () => {
    try {
      await deleteTeacher(row.id)
      ElMessage.success('删除成功')
      getTeacherList0()
    } catch (error) {
      ElMessage.error('删除失败')
    }
  })
}

// 编辑教师
const handleEdit = (row) => {
  formData.value = { ...row }
  isAdd.value = false
  dialogVisible.value = true
}

// 提交表单
const handleSubmit = async () => {
  try {
    if (isAdd.value) {
      await addTeacher(formData.value)
      ElMessage.success('添加成功')
    } else {
      await updateTeacher(formData.value)
      ElMessage.success('更新成功')
    }
    dialogVisible.value = false
    getTeacherList0()
  } catch (error) {
    ElMessage.error(error || (isAdd.value ? '添加失败' : '更新失败'))
  }
}

// 添加教师按钮处理函数
const handleAdd = () => {
  resetFormData()
  isAdd.value = true
  dialogVisible.value = true
}

// 页面加载时获取列表
onMounted(() => {
  getTeacherList0()
})
</script>

<template>
  <div class="teacher-manage">
    <!-- 搜索区域 -->
    <el-card class="search-card" shadow="hover">
      <el-form :inline="true" :model="queryParams" class="search-form">
        <el-form-item label="教师姓名">
          <el-input v-model="queryParams.name" placeholder="请输入教师姓名" />
        </el-form-item>
        <el-form-item label="工号">
        </el-form-item>
        <el-form-item label="院系">
          <el-input v-model="queryParams.department" placeholder="请输入院系" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" :icon="Search" @click="getTeacherList0" class="search-btn">搜索</el-button>
          <el-button type="success" @click="handleAdd" class="add-btn">
            <el-icon class="icon"><Plus /></el-icon>新增教师
          </el-button>
        </el-form-item>
      </el-form>
    </el-card>

    <!-- 表格区域 -->
    <el-card class="table-card" shadow="hover">
      <el-table 
        :data="tableData" 
        border 
        stripe
        highlight-current-row
        class="custom-table"
      >
        <el-table-column prop="name" label="教师姓名" />
        <el-table-column prop="teacherNo" label="工号" />
        <el-table-column prop="gender" label="性别">
          <template #default="{ row }">
            {{ row.gender === 0 ? '女' : '男' }}
          </template>
        </el-table-column>
        <el-table-column prop="department" label="院系" />
        <el-table-column prop="email" label="邮箱" />
        <el-table-column prop="phone" label="手机号" />
        <el-table-column prop="title" label="职称" />
        <el-table-column prop="office" label="办公室" />
        <el-table-column label="操作" width="180">
          <template #default="{ row }">
            <el-button 
              type="primary" 
              :icon="Edit" 
              @click="handleEdit(row)"
              class="edit-btn"
              size="small"
            >编辑</el-button>
            <el-button 
              type="danger" 
              :icon="Delete" 
              @click="handleDelete(row)"
              class="delete-btn"
              size="small"
            >删除</el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页 -->
      <el-pagination
        v-model:current-page="queryParams.current"
        v-model:page-size="queryParams.pageSize"
        :total="total"
        @current-change="getTeacherList"
        @size-change="getTeacherList"
        background
        layout="total, sizes, prev, pager, next, jumper"
        class="pagination"
      />
    </el-card>

    <!-- 编辑对话框 -->
    <el-dialog 
      v-model="dialogVisible" 
      :title="isAdd ? '新增教师信息' : '编辑教师信息'" 
      width="500px"
      destroy-on-close
      class="custom-dialog"
    >
      <el-form 
        :model="formData" 
        label-width="100px"
        class="dialog-form"
      >
        <el-form-item label="教师姓名">
          <el-input v-model="formData.name" />
        </el-form-item>
        <el-form-item label="工号">
          <el-input v-model="formData.teacherNo" />
        </el-form-item>
        <el-form-item label="性别">
          <el-radio-group v-model="formData.gender">
            <el-radio :label="0">女</el-radio>
            <el-radio :label="1">男</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="院系">
          <el-input v-model="formData.department" />
        </el-form-item>
        <el-form-item label="邮箱">
          <el-input v-model="formData.email" />
        </el-form-item>
        <el-form-item label="手机号">
          <el-input v-model="formData.phone" />
        </el-form-item>
        <el-form-item label="职称">
          <el-input v-model="formData.title" />
        </el-form-item>
        <el-form-item label="办公室">
          <el-input v-model="formData.office" />
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button type="primary" @click="handleSubmit">确定</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<style scoped lang="less">
.teacher-manage {
  padding: 20px;
  background-color: #f5f7fa;
  min-height: calc(100vh - 60px);

  .search-card {
    margin-bottom: 20px;
    
    .search-form {
      .search-btn {
        margin-right: 10px;
      }
      
      .add-btn {
        .icon {
          margin-right: 4px;
        }
      }
    }
  }

  .table-card {
    .custom-table {
      margin: 15px 0;
      
      :deep(.el-table__header) {
        background-color: #f5f7fa;
      }
      
      .edit-btn {
        margin-right: 10px;
      }
    }

    .pagination {
      margin-top: 20px;
      justify-content: flex-end;
    }
  }
}

.custom-dialog {
  :deep(.el-dialog__body) {
    padding: 20px 40px;
  }

  .dialog-form {
    .el-form-item {
      margin-bottom: 20px;
    }
  }

  .dialog-footer {
    text-align: right;
    margin-top: 20px;
  }
}

// 添加一些过渡动画
.el-card {
  transition: all 0.3s ease;
  
  &:hover {
    transform: translateY(-2px);
    box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
  }
}

.el-button {
  transition: all 0.3s ease;
  
  &:hover {
    transform: translateY(-1px);
  }
}
</style>
